<template>
  <div>
    <div v-if="toggleView == 'login'" class="loginBox">
      <div
          style="background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1); filter: blur(60px); transition: all .3s"></div>
      <div style="margin: 30px auto; width: 40%">
        <label style="margin-right: 4px">当前权限:</label>
        <el-tag type="primary">Tag 1</el-tag>
      </div>
      <div style="margin: 0 auto; width: 40%">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="账号">
            <el-input v-model="form.username"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password"/>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="onSubmit('login')">登录</el-button>
          <el-button type="primary" @click="onSubmit('logout')">退出登录</el-button>
        </div>
      </div>
    </div>
    <div v-if="toggleView !== 'login'" class="loginSuccessBox">
      <el-descriptions title="用户信息">
        <el-descriptions-item label="用户名">{{ form.username }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ form.password }}</el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" @click="onSubmit('logout')">退出登录</el-button>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {UseUserStore} from '@/stores/index.js'
import elMessageFuc from '@/util/ElMessage.js'
import {adminMenu, defaultMean, studentMenu, teacherMenu} from './roleMeans.js'

let store = UseUserStore()

const form = reactive({
  username: store.userInfo.username === '' ? '' : store.userInfo.username,
  password: store.userInfo.password === '' ? '' : store.userInfo.password
})
const toggleView = ref('login')

const onSubmit = (action) => {
  if (action === 'login') {
    console.log('submit!')
    const loginUser = form.username
    const password = form.password
    let targetMenu = null

    switch (loginUser) {
      case '' :
        targetMenu = defaultMean
        break
      case 'admin':
        targetMenu = adminMenu
        break
      case 'student':
        targetMenu = studentMenu
        break
      case 'teacher':
        targetMenu = teacherMenu
        break
      default:
        elMessageFuc.error('账号或密码错误')
        toggleView.value = 'login'
        return
    }

    if (password === '123456') {
      store.userInfo = form
      store.userMean = targetMenu
      elMessageFuc.success('登录成功')
      toggleView.value = 'loginSuccessBox'
    } else {
      elMessageFuc.error('账号或密码错误')
      toggleView.value = 'login'
    }
  } else if (action === 'logout') {
    store.userInfo = {}
    store.userMean = [{
      path: '/',
      icon: 'User',
      title: '请登录测试动态路由'
    }]
    toggleView.value = 'login'
  }
}
</script>
